<template>
	<kui-page :mode="mode" :custom-header="false">
		<template v-slot:body>
			<view class="kui-mb-3">
				<kui-cell-group title="暗黑模式">
					<kui-switch v-model="modeChecked" @change="changeMode"></kui-switch>
				</kui-cell-group>
			</view>
			<kui-cell-group title="标签类型">
				<view class="kui-w-full">
					<kui-space :gap="[30, 20]">
						<kui-tag>默认标签</kui-tag>
						<kui-tag type="primary">主要标签</kui-tag>
						<kui-tag type="info">信息标签</kui-tag>
						<kui-tag type="danger">危险标签</kui-tag>
						<kui-tag type="warning">警告标签</kui-tag>
						<kui-tag type="success">成功标签</kui-tag>
					</kui-space>
				</view>
			</kui-cell-group>
			<view class="kui-mt-3">
				<kui-cell-group title="空心标签">
					<kui-tag type="primary" plain>空心标签</kui-tag>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="方形标签">
					<kui-tag shape="square" type="primary">方形标签</kui-tag>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="标签尺寸">
					<view class="kui-mb-3">
						<kui-tag size="large" type="primary">大号标签</kui-tag>
					</view>
					<kui-space :gap="[30,20]" align="center">
						<kui-tag size="normal" type="primary">普通标签</kui-tag>
						<kui-tag size="small" type="primary">小型标签</kui-tag>
						<kui-tag size="mini" type="primary">迷你标签</kui-tag>
					</kui-space>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="块级标签">
					<view class="kui-w-full">
						<kui-tag type="primary" block>块级标签</kui-tag>
					</view>
				</kui-cell-group>
			</view>
			<view  class="kui-mt-3">
				<kui-cell-group title="半圆角标签">
					<view class="kui-w-full">
						<view class="kui-mb-3">
							<kui-tag size="large" half-round="right" type="primary">大号标签</kui-tag>
						</view>
						<kui-space :gap="[30,20]" align="center">
							<kui-tag size="normal" half-round="right" type="primary">普通标签</kui-tag>
							<kui-tag size="small" half-round="right" type="primary">小型标签</kui-tag>
							<kui-tag size="mini" half-round="right" type="primary">迷你标签</kui-tag>
						</kui-space>
					</view>
					<view class="kui-w-full">
						<view class="kui-my-3">
							<kui-tag size="large" half-round="left" type="primary">大号标签</kui-tag>
						</view>
						<kui-space :gap="[30,20]" align="center">
							<kui-tag size="normal" half-round="left" type="primary">普通标签</kui-tag>
							<kui-tag size="small" half-round="left" type="primary">小型标签</kui-tag>
							<kui-tag size="mini" half-round="left" type="primary">迷你标签</kui-tag>
						</kui-space>
					</view>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="可关闭标签">
					<kui-space :gap="[30,20]">
						<kui-tag closable>可关闭标签</kui-tag>
						<kui-tag closable close-icon="trash">自定义关闭图标</kui-tag>
					</kui-space>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="加载中标签">
					<kui-space :gap="[30,20]">
						<kui-tag loading>加载中标签</kui-tag>
						<kui-tag loading loading-icon="spinner6">自定义关闭图标</kui-tag>
					</kui-space>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="可选中标签" desc="(控制台可查看组件选中结果)">
					<kui-space :gap="[30,20]">
						<kui-tag type="primary" checkable>默认未选中</kui-tag>
						<kui-tag type="primary" checkable :default-checked="true">默认选中</kui-tag>
						<kui-tag type="info" ref="checkableTag1" checkable :default-checked="checked1" @click="onCheck1">点击选中</kui-tag>
						<kui-tag type="info" ref="checkableTag2" checkable :default-checked="checked2" :auto-checked="autoChecked" @click="onCheck2">点击手动选中</kui-tag>
					</kui-space>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="自定义颜色">
					<kui-space :gap="[30,20]">
						<kui-tag background-color="pink" text-color="#fff">标签</kui-tag>
						<kui-tag background-color="pink" plain>标签</kui-tag>
						<kui-tag background-color="rgba(0,0,0,1)" border-color="rgba(0,0,0,0.1)" plain>标签</kui-tag>
						<kui-tag background-color="#FFE4BA" text-color="#FF7D00">标签</kui-tag>
					</kui-space>
				</kui-cell-group>
			</view>
			<view class="kui-mt-3">
				<kui-cell-group title="自定义插槽">
					<kui-space :gap="[30,20]">
						<kui-tag>
							<template v-slot:left-icon>
								<kui-icons type="star"></kui-icons>
							</template>
							左侧插槽
						</kui-tag>
						<kui-tag>
							右侧插槽
							<template v-slot:right-icon>
								<kui-icons type="heart"></kui-icons>
							</template>
						</kui-tag>
						<kui-tag>
							<template v-slot:left-icon>
								<kui-icons type="star"></kui-icons>
							</template>
							左右两侧插槽
							<template v-slot:right-icon>
								<kui-icons type="heart"></kui-icons>
							</template>
						</kui-tag>
					</kui-space>
				</kui-cell-group>
			</view>
		</template>
	</kui-page>
</template>

<script lang="ts">
	import {
		getCurrentInstance,
		reactive,
		nextTick,
		toRefs
	} from 'vue';
	
	import { modal } from '@/common/utils/utils';

	export default {
		setup() {
			const {
				proxy
			}: any = getCurrentInstance();
			const theme = proxy.$theme;
			
			const state = reactive({
				checked1: false,
				checked2: false,
				autoChecked: false,
				mode: 'light',
				modeChecked: false
			});
			
			const onCheck1 = (e) => {
				nextTick(() => {
					state.checked1 = !state.checked1;
					setTimeout(() => {
						console.log(proxy.$refs['checkableTag1'].getState());
					}, 0);
				})
			}
			
			const onCheck2 = (e) => {
				nextTick(() => {
					state.autoChecked = false;
					if (!state.checked2) {
						modal('提示', '是否选中', true, '否', '是', (res) => {
							if (res.confirm) {
								state.autoChecked = true;
								state.checked2 = true;
								setTimeout(() => {
									console.log(proxy.$refs['checkableTag2'].getState());
								}, 0);
							}
						})
					} else {
						modal('提示', '是否取消选中', true, '否', '是', (res) => {
							if (res.confirm) {
								state.autoChecked = true;
								state.checked2 = false;
								setTimeout(() => {
									console.log(proxy.$refs['checkableTag2'].getState());
								}, 0);
							}
						})
					}
					console.log(proxy.$refs['checkableTag2'].getState());
				})
			}
			
			const changeMode = () => {
				state.mode = state.mode == "light" ? "dark" : "light";
				uni.$emit("changeMode", state.mode);
			};
			
			return {
				...toRefs(state),
				onCheck1,
				onCheck2,
				changeMode
			}
		}
	}
</script>

<style>

</style>
